<template>
  <view class="device-indicator-container">

  </view>
  <view>
    <up-tabs :list="tabs" @click="tabClickHandler" lineColor="#d54448"></up-tabs>

    <view class="filter-container">
      <CustomPicker
        :columns="deviceColumns"
        @confirm="devicePickerConfirmHandler"
      ></CustomPicker>
      <CustomSpacePicker
        :isMock="true"
        @confirm="spacePickerConfirmHandler"
      ></CustomSpacePicker>
    </view>

    <up-input
      placeholder="请输入内容"
      border="surround"
      v-model="searchValue"
    ></up-input>
    <up-list
      @scrolltolower="scrolltolower"
      height="calc(100vh - 38px)"
    >
      <CustomUpListItem
        v-for="(item, index) in devices"
        :key="`device${index}`"
        :deviceItem="item"
      />
      <up-list-item
        v-for="(item, index) in indexList"
        :key="index"
      >
        <up-cell :title="`列表长度-${index + 1}`" @click="viewProjectDetail">
          <template #icon>
            <up-avatar
              shape="square"
              size="35"
              :src="item.url"
              customStyle="margin: -3px 5px -3px 0"
            ></up-avatar>
          </template>
        </up-cell>
      </up-list-item>
    </up-list>
  </view>

  <LampFormModal :show="isModelShow" @set-show="isModelShow = $event" @confirm="modelConfirmHandler" />
  <view>
    <up-float-button
      :isMenu="true"
      top="220px"
      :list="list" 
      @item-click="itemClick"
    >
    </up-float-button>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import CustomPicker from "@/components/common/CustomPicker/CustomPicker.vue";
import CustomSpacePicker from "@/components/common/CustomSpacePicker/CustomSpacePicker.vue";
import LampFormModal from "./lampFormModal.vue";
import { DeviceTypeEnum, DeviceTypeNameEnum } from '@/types/enum';
import { tabsType } from '@/types/type';
import CustomUpListItem from './CustomUpListItem.vue'
import type { IDeviceItem } from '@/types/deviceType';

const searchValue = ref('');
const indexList = reactive([]);
const urls = [
  'https://uview-plus.jiangruyi.com/album/1.jpg',
  'https://uview-plus.jiangruyi.com/album/2.jpg',
  'https://uview-plus.jiangruyi.com/album/3.jpg',
  'https://uview-plus.jiangruyi.com/album/4.jpg',
  'https://uview-plus.jiangruyi.com/album/5.jpg',
  'https://uview-plus.jiangruyi.com/album/6.jpg',
  'https://uview-plus.jiangruyi.com/album/7.jpg',
  'https://uview-plus.jiangruyi.com/album/8.jpg',
  'https://uview-plus.jiangruyi.com/album/9.jpg',
  'https://uview-plus.jiangruyi.com/album/10.jpg',
];

onLoad(() => {
  loadmore();
});

const scrolltolower = () => {
  // loadmore();
};

const loadmore = () => {
  for (let i = 0; i < 30; i++) {
    indexList.push({
      url: urls[uni.$u.random(0, urls.length - 1)],
    });
  }
};

const tabs = reactive<tabsType[]>([
  { name: '设备管理' },
  { name: '分组管理' },
]);
const currentTab = ref<number>(0);
const tabClickHandler = (tab: tabsType) => {
  currentTab.value = tab.index as number;
}

const deviceColumns = reactive(
  Object.keys(DeviceTypeNameEnum).map((key) => {
    return {
      label: DeviceTypeNameEnum[key as keyof typeof DeviceTypeNameEnum],
      code: key,
    }
  })
);
const currentDeviceType = ref({ label: DeviceTypeNameEnum.ALL, code: DeviceTypeEnum.ALL });
const devicePickerConfirmHandler = (target: any) => {
  currentDeviceType.value = target;
}
const spacePickerConfirmHandler = (target: any) => {
  console.log('spacePickerConfirmHandler: ', target);
}

const viewProjectDetail = () => {
  console.log('viewProjectDetail')
  isModelShow.value = true;
  // wx.showModal({
  //   title: '是否授权相册权限',
  //   content: '需要获取相册权限，请确认授权，否则无法使用相关功能',
  //   success: (res) => {
  //     if (res.confirm) {

  //     }
  //   },
  // });
}

// 弹窗
const isModelShow = ref(false);
const modelConfirmHandler = (formData:any) => {
  console.log('modelConfirmHandler: ', formData);
}

// 悬浮按钮
// 响应式数据  
const list = ref([
    {key: 'plus', name: 'plus', color: '#fff', backgroundColor: 'blue'},
    {key: 'plus', name: 'order', color: '#fff', backgroundColor: 'green'}
]);

const itemClick = (e) => {
    console.log(e)
}

const devices: IDeviceItem[] = [
  { id: 1, name: '设备1', status: '正常', show: false },
  { id: 2, name: '设备2', status: '异常', show: false },
  { id: 3, name: '设备3', status: '正常', show: false },
];
</script>

<style>
.device-indicator-container {
  height: 280rpx;
  background-color: #f2f2f2;
}

.scroll-view-container {
  height: calc(100vh - 56px);
}

.filter-container {
  display: flex;
  flex-direction: row;
}
</style>
